<!-- 逻辑 -->
<script setup lang="ts">
import { ref } from 'vue';

const isShow = ref(false)
const age = ref(4)
</script>

<!-- 结构 -->
<template>
<div>
  <button @click="isShow=!isShow">切换图片显示</button>
</div>
<!-- v-show的本质是通过修改样式(style="display: none")控制显示隐藏, 元素始终在页面上存在 -->
<img v-show="isShow" src="https://www.miyoushe.com/_static/img/miHoYo_Game.2457753.png" alt="">
<!-- v-if的本质是从页面中移除或者添加 dom 元素(比较耗费性能), 频繁切换的元素推荐用v-show -->
<img v-if="isShow" src="https://www.miyoushe.com/_static/img/miHoYo_Game.2457753.png" alt="">

<button @click="age+=2">成长: {{ age }}</button>
<h3 v-if="age<5">玩泥巴</h3>
<!-- v-else-if 和 v-else 不能单独使用, 需要结合 v-if -->
<h3 v-else-if="age<18">偷摸去网吧</h3>
<h3 v-else>正大光明去网吧</h3>
</template>

<!-- 样式 -->
<style scoped>
img {
  width: 200px;
  height: 200px;
}
</style>